<template>
  <div>
    <!-- 新增用药登记 -->
    <el-card class="card">
      <el-form ref="ruleFormRef" class="demo-form-inline" :model="ruleForm" :rules="rules">
        <el-form-item label="登记时间：" prop="addTime">
          <el-date-picker
            v-model="ruleForm.addTime"
            format="YYYY-MM-DD"
            type="datetime"
            value-format="YYYY-MM-DD HH:mm:ss"
            placeholder="请选择"
          />
        </el-form-item>
        <el-form-item label="家属姓名：" prop="familyName">
          <el-input v-model="ruleForm.familyName" clearable style="width: 220px" />
        </el-form-item>
        <el-button type="primary" @click="add">新增药品</el-button>
      </el-form>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="id" label="序号" />
        <el-table-column prop="name" label="商品名称" />
        <el-table-column prop="counts" label="数量" />
        <el-table-column prop="expTime" label="有效期" />
        <el-table-column prop="sum" label="剂量" />
        <el-table-column prop="remarks" label="服法" />
        <el-table-column label="操作">
          <template #default="scope">
            <el-button type="primary" link @click="update(scope.row, scope.$index)">编辑</el-button>
            <el-button type="primary" link @click="del(scope.$index)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div style="margin-top: 20px; text-align: center">
        <el-button type="primary" @click="save(ruleFormRef)">保存</el-button>
        <el-button @click="cancel">取消</el-button>
      </div>
      <AddMedicinelog v-if="dialogVisible" :currentData="currentData" @close="closeHandle" />
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { reactive, provide } from "vue";
import { useRoute, useRouter } from "vue-router";
import type { FormInstance, FormRules } from "element-plus";
import { AddParams, ListData } from "@/api/medicalcare/medicinelogs/type";
import AddMedicinelog from "@/components/medicalcare/medicinelog/AddMedicinelog.vue";
import dayJs from "dayjs";
import { addDrugs } from "@/api/medicalcare/medicinelogs/medicinelogs";

const ruleFormRef = ref();
const route = useRoute();
const router = useRouter();

//添加参数
let ruleForm = reactive<AddParams>({
  elderlyId: Number(route.query.oldId),
  addTime: dayJs(new Date()).format("YYYY-MM-DD  HH:mm:ss"),
  familyName: "",
  name: "",
  counts: undefined,
  unit: "盒",
  expTime: "",
  sum: undefined,
  norms: "粒",
  remarks: "",
});

//规则
const rules = reactive<FormRules<AddParams>>({
  addTime: [
    {
      required: true,
      message: "请选择登记时间",
      trigger: "change",
    },
  ],
  familyName: [
    {
      required: true,
      message: "请输入家属姓名",
      trigger: "blur",
    },
  ],
});

const dialogVisible = ref(false);

//添加
const add = () => {
  currentData.value = {
    elderlyId: Number(route.query.oldId),
    addTime: dayJs(new Date()).format("YYYY-MM-DD  HH:mm:ss"),
    familyName: "",
    name: "",
    counts: undefined,
    unit: "盒",
    expTime: "",
    sum: undefined,
    norms: "粒",
    remarks: "",
  };
  dialogVisible.value = true;
};

const tableData = reactive<AddParams[]>([]);

//关闭添加dialog
const closeHandle = (data: AddParams) => {
  dialogVisible.value = false;
  if (data) {
    if (data.id) {
      //修改
      tableData.splice(currentIndex.value, 1, data);
    } else {
      //添加
      data.id = tableData.length + 1;
      tableData.push(data);
    }

    Object.assign(ruleForm, data);
  }
};

const currentData = ref<AddParams>();
const currentIndex = ref(0);
//编辑
const update = (data: AddParams, index: number) => {
  dialogVisible.value = true;
  //当前修改对象
  currentData.value = data;
  currentIndex.value = index;
};

//删除
const del = (index: number) => {
  tableData.splice(index, 1);
};

//取消
const cancel = () => {
  router.push("/medicalcare/medicinelogs");
};

//保存
const save = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate(async (valid, fields) => {
    if (valid) {
      //调用添加接口
      let res = await addDrugs(ruleForm);
      //跳转列表
      router.push("/medicalcare/medicinelogs");
    } else {
      console.log("error submit!", fields);
    }
  });
};
</script>

<style scoped>
.card {
  width: 98%;
  margin: 0 auto;
  margin-top: 10px;
}
</style>
